// ======================
// 工具类配置文件
// ======================

// 1. 基础配置变量
$spacing-unit: 4px !default; // 基准间距单位
$breakpoints: (
  'sm': 576px,
  'md': 768px,
  'lg': 992px,
  'xl': 1200px
) !default;

// 2. 颜色系统 (主色 + 中性色)
$colors: (
  'primary': #007AFF,
  'secondary': #6c757d,
  'success': #28a745,
  'danger': #dc3545,
  'warning': #ffc107,
  'info': #17a2b8,
  'white': #ffffff,
  'black': #000000,
  'gray-100': #f8f9fa,
  'gray-200': #e9ecef,
  'gray-500': #adb5bd,
  'gray-800': #343a40
) !default;

// 3. 字体大小配置
$font-sizes: (
  'xs': 12px,
  'sm': 14px,
  'base': 16px,
  'lg': 18px,
  'xl': 20px,
  '2xl': 24px
) !default;

// 4. 边框圆角配置
$border-radius: (
  'none': 0,
  'sm': 2px,
  'base': 4px,
  'md': 6px,
  'lg': 8px,
  'full': 9999px
) !default;

// ======================
// 动态生成工具类
// ======================

// 1. 间距工具类 (margin/padding)
@each $size in (0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32) {
  $value: $size * $spacing-unit;

  // 全局间距
  .m-#{$size} { margin: $value !important; }
  .p-#{$size} { padding: $value !important; }

  // 方向细分
  @each $dir, $prop in ('t': 'top', 'r': 'right', 'b': 'bottom', 'l': 'left') {
    .m#{$dir}-#{$size} { margin-#{$prop}: $value !important; }
    .p#{$dir}-#{$size} { padding-#{$prop}: $value !important; }
  }

  // 水平/垂直
  .mx-#{$size} { margin-left: $value !important; margin-right: $value !important; }
  .my-#{$size} { margin-top: $value !important; margin-bottom: $value !important; }
  .px-#{$size} { padding-left: $value !important; padding-right: $value !important; }
  .py-#{$size} { padding-top: $value !important; padding-bottom: $value !important; }
}

// 2. 颜色工具类
@each $name, $color in $colors {
  // 文本颜色
  .text-#{$name} { color: $color !important; }

  // 背景颜色
  .bg-#{$name} { background-color: $color !important; }

  // 边框颜色 (需配合 border 类使用)
  .border-#{$name} { border-color: $color !important; }
}

// 3. 字体大小
@each $name, $size in $font-sizes {
  .text-#{$name} { font-size: $size !important; }
}

// 4. 文字对齐/粗细
$text-aligns: ('left', 'center', 'right', 'justify');
@each $align in $text-aligns {
  .text-#{$align} { text-align: #{$align} !important; }
}

$font-weights: (
  'light': 300,
  'normal': 400,
  'medium': 500,
  'bold': 700
);
@each $name, $weight in $font-weights {
  .font-#{$name} { font-weight: $weight !important; }
}

// 5. 弹性布局工具类
.flex { display: flex !important; }
.flex-row { display: flex !important; direction: row; }
.flex-column { display: flex !important; direction: column; }
.inline-flex { display: inline-flex !important; }

// 主轴对齐
@each $value in ('start', 'end', 'center', 'between', 'around', 'evenly') {
  .justify-#{$value} {
    @if $value == 'start' { justify-content: flex-start !important; }
    @else if $value == 'end' { justify-content: flex-end !important; }
    @else if $value == 'between' { justify-content: space-between !important; }
    @else { justify-content: #{$value} !important; }
  }
}

// 交叉轴对齐
@each $value in ('start', 'end', 'center', 'baseline', 'stretch') {
  .items-#{$value} {
    align-items: #{$value} !important;
  }
}

// 6. 边框工具类
.border { border-width: 1px !important; border-style: solid !important; }
.border-0 { border-width: 0 !important; }

@each $size in (1, 2, 4, 8) {
  .border-#{$size} { border-width: #{$size}px !important; }
}

@each $name, $radius in $border-radius {
  .rounded-#{$name} { border-radius: $radius !important; }
}

// 7. 响应式工具类 (基于断点)
@each $bp-name, $bp-value in $breakpoints {
  @media (min-width: $bp-value) {
    @each $size in (0, 1, 2, 3, 4) {
      .#{$bp-name}\:m-#{$size} { margin: $size * $spacing-unit !important; }
    }
    .#{$bp-name}\:text-center { text-align: center !important; }
  }
}